import { Image, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './communityModule.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import moment from 'dayjs';
import rightIcon from '@/assets/image/index/right.png'
import c1Icon from '@/assets/image/communityActivity/c_icon1.png'
import c2Icon from '@/assets/image/communityActivity/c_icon2.png'
import c3Icon from '@/assets/image/communityActivity/c_icon3.png'
import bannerIcon from '@/assets/image/communityActivity/c_banner.png'

type ICommunityProps = T.IProps & T.ICommunityProps;
//@ts-ignore
@connect<Partial<ICommunityProps>, T.ICommunityState>(store2Props, actions)
export default class Info extends Component<Partial<ICommunityProps>, T.ICommunityState> {
  constructor(props: ICommunityProps) {
    super(props);
    this.state = {
      activeList: []
    };
  }

  renderChildView(list) {
    let ViewItem = [];
    list.map((item, index) => {
      ViewItem.push(
        <View
          className='item'
          onClick={(e) => {
            e.stopPropagation();
            Taro.navigateTo({
              url: '/pages/package-C/activity/detail/index?id=' + item.id,
            })
          }}>
          {item.status == 0 ? (
            <Image className='t_icon' src={c1Icon} mode="widthFix" />
          ) : item.status == 1 ? (
            <Image className='t_icon' src={c2Icon} mode="widthFix" />
          ) : item.status == 2 || item.status == 4 ? (
            <Image className='t_icon' src={c2Icon} mode="widthFix" />
          ) : null}
          {item.refImage[0] ? (
            <Image className='t_banner' src={item.refImage[0].imageUrl} mode="widthFix" />
          ) : (
            <Image className='t_banner' src={bannerIcon} mode="widthFix" />
          )}
          <Text className='title'>
            {item.title}
          </Text>
          <Text className='date'>
            截止日期:{moment(item.enrollEndDate).format('YYYY-MM-DD')}
          </Text>
        </View>,
      );
    });
    return ViewItem;
  }

  renderChildView1(list) {
    var ViewItem = [];
    list.map((item, index) => {
      ViewItem.push(
        <View
          className='item1'
          onClick={(e) => {
            e.stopPropagation();
            Taro.navigateTo({
              url: '/pages/package-C/activity/detail/index?id=' + item.id,
            })
          }}>
          {item.status == 0 ? (
            <Image className='t_icon' src={c1Icon} mode="widthFix" />
          ) : item.status == 1 ? (
            <Image className='t_icon' src={c2Icon} mode="widthFix" />
          ) : item.status == 2 || item.status == 4 ? (
            <Image className='t_icon' src={c2Icon} mode="widthFix" />
          ) : null}
          {item.refImage[0] ? (
            <Image className='t_banner1' src={item.refImage[0].imageUrl} mode="widthFix" />
          ) : (
            <Image className='t_banner1' src={bannerIcon} mode="widthFix" />
          )}
          <Text className='title'>
            {item.title}
          </Text>
          <Text className='date'>
            截止日期:{moment(item.enrollEndDate).format('YYYY-MM-DD')}
          </Text>
        </View>,
      );
    });
    return ViewItem;
  }

  render() {
    let {
      main: { activeList },
      actions: { action },
    } = this.props;
    return (
      activeList.length > 0 &&
      <View className="PageIndexCommunity">
        <View className='content'>
          {/* <Image className='b_bg' mode="widthFix" src={bgIcon} /> */}
          <View
            className='t_box'
            onClick={(e) => {
              e.stopPropagation();
              Taro.navigateTo({
                url: `/pages/package-C/activity/list/index`,
              })
            }}>
            <View className='row'>
              {/* <View
                style={{
                  height: '16px',
                  width: '5px',
                  backgroundColor: '#218CFF',
                  marginRight: '10px',
                }}></View> */}
              <Text className='l_title'>社区活动</Text>
              {/* <Text className='t_border'></Text>
              <Text className='r_title'>美好生活季</Text> */}
            </View>
            <View className='row' style={{ justifyContent: 'center' }}>
              <Text className='more'>更多</Text>
              <View
                style={{ alignContent: 'center', justifyContent: 'center' }}>
                <Image className='r_img' src={rightIcon} mode="widthFix" />
              </View>
            </View>
          </View>
          <ScrollView scrollX>
            <View className='scroll'>
              {activeList.length == 1 ? this.renderChildView1(activeList) : activeList.length > 1 ? this.renderChildView(activeList) : ''}
            </View>
          </ScrollView>
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
